<template>
    <div class="example1-wrapper">
        <div class="inner">
            <bk-dialog v-model="orderdialog.custom1.visible"
                width="720"
                :position="orderdialog.custom1.position"
                @confirm="confirmplace"
                title="订单详情">
                <bk-table :data="orderdata">
                    <bk-table-column label="商户账号" prop="merchant"></bk-table-column>
                    <bk-table-column label="衣服类型" prop="type"></bk-table-column>
                    <bk-table-column label="洗衣模式" prop="Washmethod"></bk-table-column>
                    <bk-table-column label="数量" prop="num"></bk-table-column>
                </bk-table>
            </bk-dialog>
            <span style="font-size:15px">搜索衣服类型:</span>
            <bk-input :clearable="true" v-model="searchword" style="width:300px"></bk-input>
            <bk-button theme="primary" title="搜索" @click="dosearch">搜索</bk-button>
            <bk-button theme="primary" title="重置" @click="doreset">重置</bk-button>
            <bk-form :label-width="200" :model="formData" :rules="rules" ref="validateForm1">
                <div style="margin-top:15px;">
                    <bk-table
                        :data="data"
                        height="500"
                        @row-mouse-enter="handleRowMouseEnter"
                        @row-mouse-leave="handleRowMouseLeave"
                        @scroll-end="handleScrollToBottom">
                        <bk-table-column type="index" label="序列" width="80"></bk-table-column>
                        <bk-table-column
                            label="提供商户"
                            prop="merchant"
                            :filters="merchantFilters"
                            :filter-method="merchantFilterMethod"></bk-table-column>
                        <bk-table-column
                            label="衣服类型"
                            prop="type"></bk-table-column>
                        <bk-table-column
                            :filters="WashmethodFilters"
                            :filter-method="WashmethodFilterMethod"
                            label="洗衣模式"
                            prop="Washmethod"></bk-table-column>
                        <bk-table-column
                            label="近15日销量"
                            prop="sales"></bk-table-column>
                        <bk-table-column label="单价(元/件)" prop="price"></bk-table-column>
                        <bk-table-column label="数量" prop="num"></bk-table-column>
                        <bk-table-column label="操作" width="150">
                            <template slot-scope="props">
                                <bk-icon @click="getTotal(1, props.row)" type="minus-circle" />
                                <bk-icon @click="getTotal(2, props.row)" type="plus-circle" />
                            </template>
                        </bk-table-column>
                    </bk-table>
                </div>
                <div style="margin-top:2px">
                    <span style="font-size:24px;color:#000000">总价:</span>
                    <bk-animate-number style="font-size:24px;color:#000000" v-model="total.num" :digits="digits"></bk-animate-number>
                </div>
                <bk-form-item>
                    <bk-button style="margin-left:300px;width:100px" theme="primary" title="下单" @click.stop.prevent="check" :loading="isChecking">下单</bk-button>
                </bk-form-item>
            </bk-form>
        </div>
    </div>
</template>

<script>
    export default {
        inject: ['reload'],
        data () {
            const user = sessionStorage.getItem('user')
            if (user) {
                const username1 = JSON.parse(user)
                this.username = username1
            }
            return {
                username: '',
                mername: '',
                searchword: '',
                total: {
                    num: 0
                },
                digits: 1,
                orderdialog: {
                    custom1: {
                        visible: false,
                        position: {
                            top: 100
                        }
                    }
                },
                data: [
                ],
                orderdata: [
                ],
                merchantFilters: [],
                WashmethodFilters: [
                    {
                        text: '普通洗',
                        value: '普通洗'
                    },
                    {
                        text: '超强洗',
                        value: '超强洗'
                    }
                ]
            }
        },
        watch: {
            data: {
                handler () {
                    const that = this
                    that.makeorderdata()
                }
            }
        },
        created () {
            this.getmerchant()
            this.getprice()
        },
        methods: {
            /**
             * 获取页面数据
             *
             * @return {Promise} promise 对象
             */
            doreset () {
                this.reload()
            },
            dosearch () {
                if (this.searchword !== '') {
                    this.search()
                } else {
                    this.$bkInfo({
                        title: '请输入关键字'
                    })
                }
            },
            search () {
                this.data = []
                const qs = require('qs')
                this.axios({
                    url: '/searchgoods/',
                    method: 'POST',
                    responseType: 'json',
                    data: qs.stringify({
                        keyword: this.searchword
                    })
                }).then(res => {
                    if (res.data.result === true) {
                        for (const i in res.data.result_data) {
                            const tmp = {
                                merchant: '',
                                type: '',
                                Washmethod: '',
                                sales: '',
                                price: 0,
                                num: 0
                            }
                            if (res.data.result_data[i].Washmethod === 0) {
                                tmp.Washmethod = '普通洗'
                            }
                            if (res.data.result_data[i].Washmethod === 1) {
                                tmp.Washmethod = '超强洗'
                            }
                            tmp.sales = res.data.result_data[i].sales
                            tmp.merchant = res.data.result_data[i].merchant
                            tmp.price = res.data.result_data[i].price
                            tmp.type = res.data.result_data[i].type
                            this.$set(this.data, i, tmp)
                        }
                    }
                })
            },
            WashmethodFilterMethod (value, row, column) {
                const property = column.property
                return row[property] === value
            },
            merchantFilterMethod (value, row, column) {
                const property = column.property
                return row[property] === value
            },
            makeorderdata () {
                this.orderdata = []
                const tmp = {
                    num: 0
                }
                for (const i in this.data) {
                    if (this.data[i].num !== 0) {
                        this.$set(this.orderdata, tmp.num++, this.data[i])
                    }
                }
            },
            getmerchant () {
                this.axios({
                    url: '/getmerlist/',
                    method: 'get',
                    responseType: 'json'
                }).then(res => {
                    if (res.data.result === true) {
                        for (const i in res.data.result_data) {
                            const tmp = {
                                text: '',
                                value: ''
                            }
                            tmp.text = res.data.result_data[i].username
                            tmp.value = res.data.result_data[i].username
                            this.$set(this.merchantFilters, i, tmp)
                        }
                    }
                })
            },
            getprice () {
                this.data = []
                const qs = require('qs')
                this.axios({
                    url: '/getgoods/',
                    method: 'POST',
                    responseType: 'json',
                    data: qs.stringify({
                    })
                }).then(res => {
                    if (res.data.result === true) {
                        for (const i in res.data.result_data) {
                            const tmp = {
                                priceid: '',
                                merchant: '',
                                type: '',
                                Washmethod: '',
                                price: 0,
                                sales: '',
                                num: 0
                            }
                            if (res.data.result_data[i].Washmethod === 0) {
                                tmp.Washmethod = '普通洗'
                            }
                            if (res.data.result_data[i].Washmethod === 1) {
                                tmp.Washmethod = '超强洗'
                            }
                            tmp.priceid = res.data.result_data[i].id
                            tmp.merchant = res.data.result_data[i].merchant
                            tmp.price = res.data.result_data[i].price
                            tmp.sales = res.data.result_data[i].sales
                            tmp.type = res.data.result_data[i].type
                            this.$set(this.data, i, tmp)
                        }
                    }
                })
            },
            getTotal (t, row) {
                this.total.num = 0
                if (t === 1) {
                    if (row.num > 0) {
                        row.num -= 1
                    }
                }
                if (t === 2) {
                    row.num += 1
                }
                this.$set(row, row.num)
                const tmp = {
                    num: 0
                }
                for (const index in this.data) {
                    tmp.num += this.data[index].price * this.data[index].num
                }
                this.$set(this.total, 'num', tmp.num)
            },
            placeorder () {
                // 下单
                const qs = require('qs')
                this.axios({
                    url: '/newplaceorder/',
                    method: 'post',
                    responseType: 'json',
                    data: qs.stringify({
                        'username': JSON.parse(sessionStorage.getItem('user')),
                        'total': this.total.num,
                        'data': JSON.stringify(this.data)
                    })
                }).then(res => {
                    if (res.data.result === true) {
                        const h = this.$createElement
                        this.$bkInfo({
                            type: 'success',
                            title: '下单成功!',
                            showFooter: false,
                            subHeader: h('a', {
                                style: {
                                    color: '#3a84ff',
                                    textDecoration: 'none',
                                    cursor: 'pointer'
                                }
                            })
                        })
                        this.$router.push({
                            name: 'ordering'
                        })
                    } else {
                        const a = this.$bkInfo({
                            type: 'error',
                            title: '下单失败，请稍后再试',
                            subTitle: '此窗口3秒后关闭',
                            showFooter: false
                        })
                        let num = 3
                        const t = setInterval(() => {
                            a.subTitle = `此窗口${--num}秒后关闭`
                            if (num === 0) {
                                clearInterval(t)
                                a.close()
                            }
                        }, 1000)
                    }
                })
            },
            confirmplace () {
                this.placeorder()
            },
            check () {
                const tmp = {
                    flag: 0
                }
                for (const i in this.data) {
                    if (this.data[i].num !== 0) {
                        tmp.flag = 1
                        break
                    }
                }
                if (tmp.flag === 0) {
                    this.$bkInfo({
                        title: '请添加衣物'
                    })
                } else {
                    this.orderdialog.custom1.visible = true
                }
            }
        }
    }
</script>

<style scoped>
</style>
